<template>
  <div class="echarts h-full">
    <ECharts
      v-if="option"
      :option="option"
      :id="`line` + props.id"
      ref="lineEChartsRef"
      :onClick="handleClick"
    />
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts/core";
const emit = defineEmits(["handle-click"]);

const props = defineProps({
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Array,
    default: () => {
      return [
        // yData: [5000, 2600, 1300, 1300, 1250, 1500],
        // xData: ["制造业", "建筑业", "农林牧渔", "房地产", "金融业", "居民服务"],
        // month: 12,
      ];
    },
  },
});
const { params, title } = toRefs(props);

function handleClick(param: any) {
  emit("handle-click", param);
}

const option = ref({});

const colorList = [
  "#006DFB",
  "#18dcff",
  "#313ca9",
  "#B4EC51",
  "#7d5fff",
  "#FFBC6D",
  "#51D9A2",
  "#f9e264",
  "#f47a75",
  "grey",
  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    {
      offset: 0,
      color: "#04B9BD",
    },
    {
      offset: 1,
      color: "#76F2F8",
    },
  ]),
  "#765025",
];

const rich: any = {
  top: {
    color: "#666",
    // fontSize: 12,
    // padding: [8, 30, 0, 30],
    fontWeight: "600",
    top: 0,
    position: "top",
  },
  bottom: {
    color: "red",
    // fontSize: 12,
    padding: [0, 30, 0, 30],
    fontWeight: "600",
    lineHieght: 60,
    // position: "bottom",
    // bottom: 0,
    // margin: [90, 0, 0, 0],
    // offset: [30, 40],
    // padding: [install$40,]
  },
  value: {
    color: "#333",
    fontSize: 14,
    padding: [0, 30, 8, 30],
    fontWeight: "500",
    align: "left",
  },
  percent: {
    color: "#FFF",
    align: "right",
    fontSize: 14,
    fontWeight: "400",
    //padding: [0, 5]
  },
};

watch(
  () => params.value,
  (newValue) => {
    // console.log("newValue", newValue);
    const list: any = {
      //   animation: true, //控制动画示否开启
      //   animationDuration: 3000,
      color: colorList,
      title: {
        text: title.value,
        x: "center",
        y: "15",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            fontSize: 14,
          },
        },
        textStyle: {
          color: "#666",
          fontSize: 14,
        },
        //   formatter: (params: any) => {
        //     var relVal = props.params.month + "月" + params[0].name + "日";
        //     for (var i = 0, l = params.length; i < l; i++) {
        //       relVal +=
        //         "<br/>" +
        //         params[i].seriesName +
        //         " " +
        //         params[i].marker +
        //         " " +
        //         params[i].value;
        //     }
        //     return relVal;
        //   },
      },
      legend: {
        show: true,
        left: "center",
        bottom: "2%",
      },
      grid: {
        top: "22%",
        right: "20",
        left: "20",
        bottom: "12%",
        containLabel: true,
      },
      xAxis: [
        {
          name: "",
          data: newValue[0]?.xdata ?? [],
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.2)",
            },
          },
          axisLabel: {
            color: "#666",
            fontSize: 14,
          },
          axisTick: {
            show: true,
          },
        },
      ],
      yAxis: [
        {
          name: "",
          axisLabel: {
            formatter: "{value}",
            color: "#666",
            fontSize: 14,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.12)",
              type: "dashed",
            },
          },
        },
      ],
      series: [],
    };

    newValue?.map((e: any, index) => {
      // const
      list.series.push({
        name: e.name ?? "",
        type: "line",
        data: e.ydata ?? [],
        barWidth: "20px",
        symbol: "circle",
        symbolSize: 6,
        itemStyle: {
          // color: "#507AFF",
        },

        labelLayout(params) {
          // console.log(params);
          const standard = params.rect.y + params.rect.height / 2;
          let result = 0;
          if (index == 1) {
            if (Number(params.text) >= newValue[0].ydata[params.dataIndex]) {
              result = standard - 14;
            } else {
              result = standard + 14;
            }
          }

          if (index == 0) {
            if (Number(params.text) >= newValue[1].ydata[params.dataIndex]) {
              result = standard - 14;
            } else {
              result = standard + 14;
            }
          }
          return {
            x: params.rect.x,
            y: result,
            verticalAlign: "middle",
            align: "left",
          };
        },

        label: {
          show: true,
          lineHeight: 30,
          // backgroundColor: "#fff", // 背景颜色
          // borderColor: "#ccc", // 边框颜色
          // borderWidth: 1,
          // padding: [4, 8], // 内边距
          // borderRadius: 4, // 圆角
          // position: "bottom",
          fontSize: 12, // 字体大小
          // minMargin: 40,
          // position: function (params) {
          //   console.log("formatter", params, index);
          //   if (index == 1) {
          //     if (params.data >= newValue[0].ydata[params.dataIndex]) {
          //       return `top`;
          //     } else {
          //       return `bottom`;
          //     }
          //   }

          //   if (index == 0) {
          //     if (params.data >= newValue[1].ydata[params.dataIndex]) {
          //       return `top`;
          //     } else {
          //       return `bottom`;
          //     }
          //   }
          // },
          // rich: rich,
        },
      });
    });

    option.value = list;
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  //   box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
}
</style>
